<template>
    <div>
        <el-menu :default-active="active" mode="horizontal" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" router @select="handleSelect">
            <el-menu-item index="/">文件信息</el-menu-item>
            <el-menu-item index="/download">获取公钥</el-menu-item>
            <el-menu-item index="/add">添加文件</el-menu-item>
            <el-menu-item index="/records">获取文件访问记录</el-menu-item>
            <el-menu-item v-if="userId" class="user-id">用户名： {{ userId }}</el-menu-item>
            <el-menu-item class="user">
                <el-button v-if="!pubKeyUploaded" @click="triggerUpload" class="upload-btn">上传公钥</el-button>
                <el-button v-else disabled class="upload-btn">公钥已上传</el-button>
                <input type="file" ref="pubKeyInput" @change="uploadFiles" style="display: none;" multiple />
                <el-button @click="logoutHandle" class="logout-btn">退出</el-button>
            </el-menu-item>
        </el-menu>
    </div>
</template>




<script>
import axios from 'axios';

export default {
    data() {
        return {
            active: "/",
            pubKeyUploaded: false,
            userId: localStorage.getItem("username") || ''
        }
    },
    mounted() {
        if (sessionStorage.getItem("key")) {
            this.active = sessionStorage.getItem("key")
        }
    },
    methods: {
        logoutHandle() {
            localStorage.removeItem("token");
            if (axios.defaults.headers.common['Authorization']) {
                delete axios.defaults.headers.common['Authorization'];
            }
            this.$router.push("/login")
        },
        handleSelect(key, keyPath) {
            sessionStorage.setItem("key", key)
        },
        triggerUpload() {
            this.$refs.pubKeyInput.click();
        },
         async uploadFiles(event) {
            const files = event.target.files;
            if (files.length === 3) {
                const validFileNames = {
                    'CSR.dat': false,
                    'sign.dat': false,
                    'PublicFile.dat': false
                };

                for (let i = 0; i < files.length; i++) {
                    if (validFileNames.hasOwnProperty(files[i].name)) {
                        validFileNames[files[i].name] = true;
                    }
                }

                if (Object.values(validFileNames).every(v => v)) {
                    const formData = new FormData();
                    formData.append('CSR', files[0]);
                    formData.append('PublicFile', files[1]);
                    formData.append('sign', files[2]);
                    try {
                        const response = await axios.post('http://192.168.124.128:8081/api/uploadPublicKey', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data',
                                'Authorization': `Bearer ${localStorage.getItem('token')}`
                            }
                        });
                        this.pubKeyUploaded = response.data.success;
                        alert(response.data.message);
                    } catch (error) {
                        alert('上传失败: ' + error.response.data.message);
                    }
                } else {
                    alert('请上传CSR.dat, sign.dat和PublicFile.dat文件');
                }
            } else {
                alert('请上传三个有效的.dat文件');
            }
        }
    }
};
</script>

<style scoped lang='less'>
.user {
    float: right !important;
    margin-right: 20px !important;
    line-height: 60px !important;

    .upload-btn {
        margin-right: 50px;
    }


    .user-name {
        color: #fff;
        margin-right: 10px;
        font-size: 15px;
        border: 1px solid #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        overflow: hidden;
    }
}
.user-id {
  float: right !important;
  margin-right: 20px !important;
  line-height: 60px !important;
}
</style>

